<template>
    <!-- <div> -->
        <div class="fundationDetail">
            <x-header :left-options="{backText: ''}" :right-options="{showMore: true}" @on-click-more="shareClick()">基金详情</x-header>
            <div class="detail-con">
                <!-- 分析表 -->
                <div class="productDetailBox">
                    <h3>国泰民安增利债券型发起式C <span>020034</span></h3>
                    <div class="chart">
                        <div class="item">
                            <strong>0.9290</strong>
                            <span>最新净值</span>
                        </div>
                        <div class="item item_last">
                            <strong class="red">-8.11%</strong>
                            <span>月涨跌幅</span>
                        </div>
                    </div>
                    <div class="chartInfo">
                        <div class="tag"><span>五级·高风险</span></div>
                        <div class="tag"><span class="choosed_tag">债券型</span></div>
                        <div class="tag"><span>状态·关闭期</span></div>
                    </div>
                </div>

                <!-- echarts图标 -->
                <div class="echartsTable comp">
                    <div class="echarts_title comp_title">七日年化走势</div>
                    <div id="echartContainer"></div>
                </div>
                <div class="explain comp">
                    <div class="explain_title comp_title">说明</div>
                    <ul class="explain_list">
                        <li class="first_child"><span>.</span>本行国内基金业务定期定额投资起点金额500元人民币。</li>
                        <li><span>.</span>基金交易时间为周一至周五的9:30-15:00，节假日除外，我行仍将接受您的交易申请，并将在最近一个交易日及时受理，交易结果将以基金公司确认为准。</li>
                        <li><span>.</span>我行基金销售仅限经我行授权的网点。您可通过访问本行官网“首页-财富管理-代销基金-信息公告”栏下查询东亚银行(中国)有限公司基金</li>
                    </ul>
                </div>
            </div>
            <div class="detail-foot">
                <div class="subscribe flex" @click="subscribleClick">申购</div>
                <div class="investment flex" @click="investmentClick">定投</div>
            </div>
      </div>
    <!-- </div> -->
</template>

<script>
import echarts from 'echarts'
export default {
  data () {
    return {

    }
  },
  methods: {

    //   头部点击分享事件
    shareClick () {
      console.log('点击分享功能')
    },
    //   申购按钮点击
    subscribleClick () {
      this.$router.push({name: 'fundationBuy'})
    },
    //   定投按钮点击
    investmentClick () {
      this.$router.push({name: 'planInverse'})
    }
  },
  mounted () {
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('echartContainer'))
    // 绘制图表
    myChart.setOption({
      tooltip: {
        trigger: 'axis'
      },
      // legend: {
      //     data:['邮件营销','联盟广告','视频广告','直接访问','搜索引擎']
      // },
      toolbox: {
        show: false,
        feature: {
          mark: {show: true},
          dataView: {show: true, readOnly: false},
          magicType: {show: true, type: ['line', 'bar', 'stack', 'tiled']},
          restore: {show: true},
          saveAsImage: {show: true}
        }
      },
      grid: {
        top: '10%',
        left: '3%', // 图表距边框的距离
        right: '6%',
        bottom: '10%',
        containLabel: true
      },
      // backgroundColor: 'rgba(255,102,51,0.1)',
      calculable: true,
      xAxis: [
        {
          type: 'category',
          boundaryGap: false,
          data: ['0423', '0424', '0425', '0426', '0427', '0502', '0503']
        }
      ],
      yAxis: [
        {
          type: 'value',
          boundaryGap: false,
          data: ['0', '1', '2', '3', '4', '5', '6']
        }
      ],
      series: [
        {
          name: '直接访问',
          type: 'line',
          stack: '总量',
          itemStyle: {normal: {areaStyle: {type: 'default'}}},
          data: [320, 332, 301, 334, 390, 330, 320]
        },
        {
          name: '搜索引擎',
          type: 'line',
          stack: '总量',
          itemStyle: {normal: {areaStyle: {type: 'default'}}},
          data: [820, 932, 901, 934, 1290, 1330, 1320]
        }
      ]
    })
  }
}
</script>

<style lang="less" scoped>
    .flex {
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .fundationDetail {
        height: 100%;
        display: flex;
        flex-direction: column;
    }
    .detail-con {
        flex: 1 0 1px;
        overflow: scroll;
    }
    .detail-foot {
        // position: fixed;
        // bottom: 0;
        flex: 0 1 auto;
        display: flex;
        width: 100%;
        font-size: 0.34rem;
        height: 0.99rem;
    }
    .subscribe {
        width: 50%;
        color: #FFFFFF;
        background: #EC1B30;
    }
    .investment {
        width: 50%;
        color: #EC1B30;
        background: #FFFFFF;
    }
    .productDetailBox {
        width: 100%;
        height: 3.4rem;
        background-color: #3d477b;
        color: #fff;
        h3 {
            padding: .3rem .3rem 0;
            height: .6rem;
            font-size: .28rem;
            span {
                float: right;
                font-size: .24rem;
            }
        }
        .chart {
            margin-top: .3rem;
            padding: 0 .14rem .3rem;
            display: flex;
            .item_last {
                padding-left: .60rem !important;
            }
            .item {
                flex: 1;
                padding: 0 .46rem;
                border-right: 1px solid #bfbfbf;
                strong {
                    // todo 此处需要用到 PingFang-SC-Bold 字体
                    display: block;
                    font-weight: normal;
                    font-size: .60rem;
                }
                span {
                    display: block;
                    font-size: .20rem;
                }
            }
            :last-child {
                border-right: 0 none;
            }
            & .red {
                color: #f63;
            }
        }
        .chartInfo {
            // padding: .1rem .3rem 0;
            margin-top: .15rem;
            display: flex;
            flex-wrap: nowrap;
            .tag {
                font-size: .24rem;
                width: 33.3%;
                height: .20rem;
                display: flex;
                justify-content: center;
                align-items: center;
                border-right: 1px solid #EAEAEA;
                .choosed_tag {
                    display: inline-block;
                    width: 1.69rem;
                    height: .45rem;
                    line-height: .45rem;
                    text-align: center;
                    background: rgba(236,27,48,1);
                    border-radius: .17rem;
                }
                &:last-child {
                    border-right: 0px solid #EAEAEA;
                }
            }
        }
    }
    .comp {
        margin-top: .2rem;
        color: #333;
        background: #fff;
        .comp_title {
            display: flex;
            align-items: center;
            height: .8rem;
            border-bottom: 1px solid #EAEAEA;
            padding-left: .3rem;
            font-size: .3rem;
            font-weight: bold;
        }
    }
    .echartsTable {
        #echartContainer {
            height: 4.16rem;
            width: 100%;
            // border: 1px solid red;
        }
    }
    .explain {
        .explain_list {
            padding: .40rem .30rem;
            // height: 4.16rem;
            width: 100%;
            // border: 1px solid red;
            .first_child {
                margin-top: 0rem;
            }
            li {
                padding-left: .15rem;
                position: relative;
                margin-top: .30rem;
                font-size: .28rem;
                color: #666;
                span {
                    display: inline-block;
                    position: absolute;
                    left: 0;
                    top: -0.08rem;
                    font-weight: 800;
                }
                li:nth-child(0) {
                    margin-top: 0rem;
                }
            }
        }
    }

</style>

<style lang="less">
    #app {
        height: 100%;
    }
    .wapeer {
        height: 100%;
    }
    div.vux-header {
        background-color: #fff;
        color: #333;
    }
    div.vux-header .vux-header-left a {
        color: #333;
    }
    div.vux-header .vux-header-left .left-arrow:before {
        border: 1px solid #333;
        border-width: 1px 0 0 1px;
    }
    div.vux-header .vux-header-right a {
        color: #333;
    }
    div.vux-header .vux-header-title {
        font-size: 0.34rem;
        color: #333;
    }
    div.vux-header .vux-header-left .left-arrow:before {
        width: 0.2rem;
        height: 0.2rem;
    }
</style>
